import React, { ReactElement, InputHTMLAttributes, FC, ChangeEvent } from 'react';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import classNames from 'classnames';
import Icon from '../Icon/icon';

export type InputSize = 'lg' | 'sm';
//Omit 忽略掉size
export interface BaseInputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
  /** input组件是否可用 */
  disabled?: boolean;
  /** input组件的大小 */
  size?: InputSize;
  icon?: IconProp;
  /** input前缀 string 或者 ReactElement */
  prepend?: string | ReactElement;
  /** input后缀 string 或者 ReactElement */
  append?: string | ReactElement;
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
}


/**
 * Input 输入框 通过鼠标或者键盘输入内容，是最基础的表单域的包装
 * 
 * ~~~ js
 * import {} from 'vaporwave'
 * ~~~
 * 支持HTMLInput的所有属性
 */
export const Input: FC<BaseInputProps> = (props) => {
  const {
    disabled,
    size,
    icon,
    prepend,
    append,
    style,
    ...restProps
  } = props;
  const classes = classNames('vw-input-wrapper', {
    [`input-size-${size}`]: size,
    'is-disabled': disabled,
    'input-group': prepend || append,
    'input-group-append': !!append,
    'input-group-preappend': !!prepend
  })
  const fixControlledValue = (value: any) => {
    if (typeof value === 'undefined' || value === null) {
      return ''
    }
  }
  if ('value' in props) {
    delete restProps.defaultValue
    restProps.value = fixControlledValue(props.value)
  }
  return (
    <div className={classes} style={style} >
      {prepend && <div className="vw-input-group-preappend">{prepend}</div>}
      {icon && <div className="icon-wrapper"><Icon icon={icon} title={`title-${icon}`} /></div>}
      <input
        className="vw-input-inner"
        disabled={disabled}
        {...restProps}
      >
        {append && <div className="vw-input-group-append">{append}</div>}
      </input>
    </div>
  )
}

export default Input;